<template>
  <div class="back-bar">
    <span @click="backto()"
          class="back-btn">
      <font-awesome-icon icon="chevron-left" /><br>
    </span>
    <span class="bar-text">{{data.text}}</span>
    <!-- <router-link :to="data.rightPath"> -->
    <span @click="handle()"
          class="right">{{data.right}}</span>
    <!-- </router-link> -->
  </div>
</template>

<script>
export default {
  name: 'BackBar',
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    backto () {
      this.$router.go(-1)
    },
    handle () {
      this.$router.push({ path: this.data.rightPath })
    }
  }
}
</script>
<style scoped>
.back-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  background-color: rgb(48, 161, 67);
  color: #fff;
}
.back-btn {
  margin-left: 5px;
}
.bar-text {
  font-size: 26px;
  font-weight: 700;
}
.right {
  margin-right: 5px;
  color: #fff;
}
</style>
